<template>
  <el-container style="width: 390px; margin: 0 auto;">
    <!-- Step 1 -->
    <el-form :model="step1Form" label-width="80px">
      <el-form-item label="房子位置" style="width: 390px">
        <el-select v-model="step1Form.location" placeholder="请选择">
          <el-option
              v-for="item in locationOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="照片上传" style="width: 390px">
        <el-upload
            class="upload-demo"
            action="/upload"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">最多可上传9张</div>
        </el-upload>
      </el-form-item>
      <el-form-item label="视频上传" >
        <el-upload
            class="upload-demo"
            action="/upload"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">提高成交率哦</div>
        </el-upload>
      </el-form-item>
      <el-form-item label="地铁站">
        <el-select v-model="step1Form.metroStation" placeholder="请选择">
          <el-option
              v-for="item in metroStationOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="房屋类型">
        <el-select v-model="step1Form.houseType" placeholder="请选择">
          <el-option
              v-for="item in houseTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="入住人数">
        <el-row>
          <el-col :span="12">
            <el-form-item label="男">
              <el-input-number v-model="step1Form.maleCount" controls-position="right" :min="0" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="女">
              <el-input-number v-model="step1Form.femaleCount" controls-position="right" :min="0" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item>
        <el-button @click="nextStep(1)">下一步</el-button>
      </el-form-item>
    </el-form>

    <!-- Step 2 -->
    <el-form :model="step2Form" label-width="80px">
      <el-form-item label="居住情况与优点">
        <el-input type="textarea" v-model="step2Form.livingSituation" />
      </el-form-item>
      <el-form-item label="租金">
        <el-input v-model="step2Form.rent" />
      </el-form-item>
      <el-form-item label="租期">
        <el-select v-model="step2Form.leaseTerm" placeholder="请选择">
          <el-option
              v-for="item in leaseTermOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="交租方式">
        <el-select v-model="step2Form.paymentMethod" placeholder="请选择">
          <el-option
              v-for="item in paymentMethodOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="希望租客">
        <el-input type="textarea" v-model="step2Form.desiredTenant" />
      </el-form-item>
      <el-form-item label="自我介绍">
        <el-input type="textarea" v-model="step2Form.selfIntroduction" />
      </el-form-item>
      <el-form-item label="合约到期时间">
        <el-date-picker v-model="step2Form.contractEndDate" type="date" placeholder="选择日期" />
      </el-form-item>
      <el-form-item label="可入住时间">
        <el-date-picker v-model="step2Form.moveInDate" type="date" placeholder="选择日期" />
      </el-form-item>
      <el-form-item>
        <el-button @click="prevStep()">上一步</el-button>
        <el-button @click="nextStep(2)">下一步</el-button>
      </el-form-item>
    </el-form>

    <!-- Step 3 -->
    <el-form :model="step3Form" label-width="80px">
      <el-form-item label="微信号">
        <el-input v-model="step3Form.wechatId" />
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="step3Form.phoneNumber" />
      </el-form-item>
      <el-form-item label="看房时间">
        <el-input type="textarea" v-model="step3Form.viewingTime" />
      </el-form-item>
      <el-form-item label="出租有效期">
        <el-date-picker v-model="step3Form.rentalValidity" type="date" placeholder="选择日期" />
      </el-form-item>
      <el-form-item label="标题">
        <el-input v-model="step3Form.title" />
      </el-form-item>
      <el-form-item>
        <el-button @click="prevStep()">上一步</el-button>
        <el-button type="primary" @click="complete()">完成</el-button>
      </el-form-item>
    </el-form>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      step: 1,
      step1Form: {
        location: '',
        fileList: [],
        metroStation: '',
        houseType: '',
        maleCount: 0,
        femaleCount: 0
      },
      step2Form: {
        livingSituation: '',
        rent: '',
        leaseTerm: '',
        paymentMethod: '',
        desiredTenant: '',
        selfIntroduction: '',
        contractEndDate: '',
        moveInDate: ''
      },
      step3Form: {
        wechatId: '',
        phoneNumber: '',
        viewingTime: '',
        rentalValidity: '',
        title: ''
      },
      locationOptions: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' }
      ],
      metroStationOptions: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' }
      ],
      houseTypeOptions: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' }
      ],
      leaseTermOptions: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' }
      ],
      paymentMethodOptions: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' }
      ]
    };
  },
  methods: {
    nextStep(step) {
      this.step = step + 1;
    },
    prevStep() {
      this.step = this.step - 1;
    },
    complete() {
      // Handle completion logic here
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    }
  }
};
</script>

<style scoped>
/* Add your custom styles here */
</style>